<template>
  <div class="user-info-wrap">
    <el-form ref="addUserDrawer" :model="currentUser" :rules="ruleAddUser">
      <el-form-item class="loginname" label="登录名" prop="loginName">
        <el-input
          v-model.trim="currentUser.loginName"
          :disabled="isEdit"
          maxlength="20"
          placeholder="登录名最多20个字符"
        ></el-input>
      </el-form-item>

      <el-form-item label="姓" prop="surname">
        <el-input
          v-model.trim="currentUser.surname"
          :disabled="isEdit"
          maxlength="4"
          placeholder="姓最多4个字符"
        ></el-input>
      </el-form-item>

      <el-form-item label="名" prop="name">
        <el-input v-model.trim="currentUser.name" :disabled="isEdit" maxlength="8" placeholder="名最多8个字符"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="currentUser.email" :disabled="isEdit" maxlength="20" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>

      <el-form-item label="手机" prop="telephone">
        <el-input v-model.trim="currentUser.telephone" :disabled="isEdit" placeholder="请输入手机号" maxlength="15"></el-input>
      </el-form-item>

      <el-form-item label="座机" prop="fixedlineTelephone">
        <el-input v-model.trim="currentUser.fixedlineTelephone" :disabled="isEdit" placeholder="请输入座机号" maxlength="15"></el-input>
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input v-model.trim="currentUser.address" :disabled="isEdit" maxlength="50" placeholder="请输入地址"></el-input>
      </el-form-item>

      <el-form-item address="city" label="城市">
        <el-input v-model.trim="currentUser.city" :disabled="isEdit" placeholder="请输入所在城市"></el-input>
      </el-form-item>

      <el-form-item label="邮政编码" prop="postalCode">
        <el-input
          v-model.trim="currentUser.postalCode"
          placeholder="请输入所在地的邮政编码"
          :disabled="isEdit"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="10"
        ></el-input>
      </el-form-item>

      <el-form-item class="fileServer" label="文件服务器" prop="fileServer">
        <el-input v-model.trim="currentUser.fileServer" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item class="spacebetween">
        <div class="flex-space-between">
          <el-checkbox
            v-model="currentUser.allWorkspace"
            :disabled="isEdit"
            :false-label="'1'"
            :true-label="'0'"
          >是否应用全部工作区</el-checkbox>
          <el-switch
            v-if="currentUser.allWorkspace === '0'"
            v-model="currentUser.status"
            :disabled="isEdit"
            :width="64"
            active-text="修改"
            active-value="1"
            inactive-text="读取"
            inactive-value="0"
          ></el-switch>
        </div>
      </el-form-item>

      <el-form-item label="备注" style="margin: 0;">
        <el-input
          v-model.trim="currentUser.remark"
          :disabled="isEdit"
          resize="none"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  validateEmail,
  validatePhone,
  validateTelephone
} from '@/utils/validate'

export default {
  name: 'UserInfo',
  props: {
    currentUser: {
      type: Object,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    editLoginName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleAddUser: {
        loginName: [
          { required: true, message: '请输入登录名', trigger: 'blur' }
        ],
        surname: [{ required: true, message: '请输入姓', trigger: 'blur' }],
        name: [{ required: true, message: '请输入名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        telephone: [{ validator: validatePhone, trigger: 'blur' }],
        fixedlineTelephone: [{ validator: validateTelephone, trigger: 'blur' }]
      }
    }
  },
  created() { },
  methods: {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/variables';

::v-deep .user-info-wrap {
  .el-input {
    &.el-input--mini {
      &.is-disabled {
        .el-input__inner {
          padding: 0;
          background-color: transparent;
          border: none;
          color: $fontColor;
        }
      }
    }
  }
}
</style>
